<div class="component-demo">
  <h2>
    {{ demoTitle }}
    <a
      class="plunker"
      target="_blank" href="app/components/{{component}}/demos/{{demo}}/plnkr.html"
      title="Edit in Plunker"
    >
      <img src="img/plunker-icon.png" height="24" width="24" alt="Plunker icon"/>
    </a>
  </h2>
  <div class="card">
    <div class="card-body">
      <ng-content></ng-content>
    </div>
    <ngb-tabset class="tabset-code">
      <ngb-tab id="{{component}}-{{demo}}-html">
        <ng-template ngbTabTitle>
          <small class="badge badge-secondary" title="HTML template">T</small>
          <span>{{component}}-{{demo}}.html</span>
        </ng-template>
        <ng-template ngbTabContent>
          <pre class="language-html"><code class="language-html" [innerHTML]="snippets[demo]['markup']"></code></pre>
        </ng-template>
      </ngb-tab>
      <ngb-tab id="{{component}}-{{demo}}-typescript">
        <ng-template ngbTabTitle>
          <small class="badge badge-info" title="Component class">C</small>
          <span>{{component}}-{{demo}}.ts</span>
        </ng-template>
        <ng-template ngbTabContent>
          <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets[demo]['code']"></code></pre>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</div>
